<template>
    <el-form>
        <p>基础用法</p>
        <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options " :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <p>有禁用选项</p>
        <el-select v-model="value" placeholder="请选择" clearable>
            <el-option v-for="item in options " :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
        <p>禁用状态</p>
        <el-select v-model="value" placeholder="请选择" disabled>
            <el-option v-for="item in options " :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
        <p>基础多选</p>
        <el-select v-model="value5" multiple placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> 
        </el-select>
        <el-select v-model="value11" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> 
        </el-select>
        <p>自定义模板</p>
        <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
        </el-option>
        </el-select>

        <p>分组</p>
        <el-select v-model="value22" placeholder="请选择">
            <el-option-group v-for="group in groups" :key="group.label" :label="group.label" >
                <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-option-group>
        </el-select>

        <p>可搜索</p>
        <el-select v-model="value" filterable placeholder="请选择" >
            <el-option v-for="item in options " :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <p>创建条目</p>
        <el-select v-model="value" multiple filterable allow-create default-first-option placeholder="请选择文章标签">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>

        <p>远程搜素</p>
        <el-select v-model="value33" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
            <el-option v-for="item in options33" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
    </el-form>
</template>




<script>
export default{
    data(){
      return{
        options:[{
          value:'选项1',
          label:'黄金糕'
        }, {
          value:'选项2',
          label:'双皮奶',
          disabled: true
        }, {
          value:'选项3',
          label:'蚵仔煎'
        }, {
          value:'选项4',
          label:'龙须面'
        }, {
          value:'选项5',
          label:'北京烤鸭'
        }],
        groups: [{
          label: '热门城市',
          options: [{
            value: 'Shanghai',
            label: '上海'
          }, {
            value: 'Beijing',
            label: '北京'
          }]
        }, {
          label: '城市名',
          options: [{
            value: 'Chengdu',
            label: '成都'
          }, {
            value: 'Shenzhen',
            label: '深圳'
          }, {
            value: 'Guangzhou',
            label: '广州'
          }, {
            value: 'Dalian',
            label: '大连'
          }]
        }],
        value:'',

        value5:[],
        value11:[],
        value22:'',

        options33:[],
        list:[],
        value33:[],
        loading:false,
        states:["Alabama", "Alaska", "Arizona","Arkansas", "California", "Colorado","Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois","Indiana", "Iowa", "Kansas", "Kentucky","Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota","Mississippi", "Missouri", "Montana","Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York","North Carolina", "North Dakota", "Ohio","Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina","South Dakota", "Tennessee", "Texas","Utah", "Vermont", "Virginia","Washington", 
        "West Virginia", "Wisconsin","Wyoming"]
      }
    },
    mounted(){
        this.list=this.states.map(item=>{
            return {value:item,label:item};
        });
    },
    methods:{
        remoteMethod(query){
            if(query!==''){
                this.loading=true;
                setTimeout(()=>{
                    this.loading=false;
                    this.options33=this.list.filter(item=>{
                        return item.label.toLowerCase().indexOf(query.toLowerCase())>-1;
                    });


                },200);
            }else{
                this.options33=[];
            }
        }
    }
  }
</script>